<template>
<div>
  <el-form ref="moocFilter" :model="mooc" :size="defaultFormItemSize" label-width="80px" label-position="right" @submit.native.prevent class="px20 pt20 bgWhite">
    <filter-box :item-width="350">
      <el-form-item label="标题" prop="formFilter.title">
        <el-input class="filter-item" v-model="mooc.formFilter.title" :clearable="true" placeholder="请输入标题" />
      </el-form-item>
      <el-button slot="operator" type="default" :size="defaultFormItemSize" @click="onResetMooc">重置</el-button>
      <el-button slot="operator" type="primary" :size="defaultFormItemSize" @click="refreshMooc(true)">查询</el-button>
      <el-button slot="operator" type="primary" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('activies:activies:add')" @click="onAdd()">
        新建
      </el-button>
    </filter-box>
  </el-form>
  <el-card class="box-card" shadow="never" :style="{'height': (getMainContextHeight - 75) + 'px'}" style="overflow-y:scroll">
    <div slot="header" class="clearfix">
      <span>共查询到{{mooc.Mooc.impl.totalCount}}条数据</span>
    </div>
    <div v-if="mooc.Mooc.impl.dataList.length > 0">
      <div v-for="(item,index) in  mooc.Mooc.impl.dataList" :key="index" :class="index == 0 ? '':'mt10'">
        <el-row :gutter="24">
          <el-col :span="4">
            <div class="imgLimit">
              <img :src="setPriviewUrl(item)" alt="" class="img">
            </div>
          </el-col>
          <el-col :span="20" class="right">
            <div class="first mb26">
              <div class="moocTitle" @click="handleDetail(item)">{{item.title}}</div>
            </div>
            <div class="second mb14">
              <span v-for="(row,rowIndex) in renderItem" :class="(rowIndex != renderItem.length -1) ? 'mr18' : ''">
                <span class="label">{{row.label}}：</span>
                <span v-if="row.type == 'text'">{{item[row.column]}}</span>
                <span v-else>{{item[row.column] == '1' ? '是':'否'}}</span>
              </span>
            </div>
            <div class="first">
              <div class="pt12">
                <span class="mr10">
                  <span class="label">发布时间：</span>
                  <span>{{item.publishTime}}</span>
                </span>
              </div>
              <div class="text-right">
                <el-button type="text" @click="handleEdit(item)" :disabled="!checkPermCodeExist('mooc:mooc:edit')" v-if="item.status != 10">编辑</el-button>
                <el-button type="text" class="deleteText" @click="handleDelete(item)" :disabled="!checkPermCodeExist('mooc:mooc:delete')" v-if="item.status != 10">删除</el-button>
                <el-button type="text" @click="handlePunish(item)" :disabled="!checkPermCodeExist('mooc:mooc:edit')" v-if="item.status != 10">发布</el-button>
                <el-button type="text" class="deleteText" @click="handleOffLine(item)" :disabled="!checkPermCodeExist('mooc:mooc:edit')" v-if="item.status == 10">下线</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row type="flex" justify="end" style="margin-top: 10px;" v-if="mooc.Mooc.impl.totalCount > 0">
        <el-pagination :total="mooc.Mooc.impl.totalCount" :current-page="mooc.Mooc.impl.currentPage" :page-size="mooc.Mooc.impl.pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, prev, pager, next, sizes"
          @current-change="mooc.Mooc.impl.onCurrentPageChange" @size-change="mooc.Mooc.impl.onPageSizeChange">
        </el-pagination>
      </el-row>
    </div>
    <div v-else class="empty">
      <el-empty :image-size="200"></el-empty>
    </div>

  </el-card>
</div>
</template>
<script>
import {
  mapGetters
} from 'vuex';
import {
  TableWidget
} from '@/utils/widget.js';
import {
  PracticalController
} from '@/api';
import projectConfig from '@/core/config';
import qs from 'qs'
export default {
  name: "",
  props: {
    status: {
      type: String,
      default: '0'
    },
    statusList: {
      type: Array,
      default: () => []
    },
    infoItem: {
      type: String,
      default: '1'
    },
  },
  data() {
    return {
      mooc: {
        formFilter: {},
        Mooc: {
          impl: new TableWidget(this.loadData, true, true, true, 'createTime', 0)
        },
        isInit: false
      },
      total: 0,
      tableList: [],
      sortOptions: [],
      sort: "",
      renderItem: [{
        label: "来源",
        column: "infoSourceStr",
        type: "text"
      }, {
        label: "是否幻灯片",
        column: "isHeadline",
        type: "boolean"
      }, {
        label: "栏目类型",
        column: "infoItemStr",
        type: "text"
      }],
      remarkItem: [{
        label: "发布时间",
        column: "publishTime"
      }],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  computed: {
    ...mapGetters(['getMainContextHeight'])
  },
  methods: {
    onResetMooc() {
      this.$refs.moocFilter.resetFields();
      this.refreshMooc(true);
    },
    refreshMooc(reloadData = false) {
      if (reloadData) {
        this.mooc.Mooc.impl.refreshTable(true, 1);
      } else {
        this.mooc.Mooc.impl.refreshTable();
      }
      if (!this.mooc.isInit) {
        // 初始化下拉数据
      }
      this.mooc.isInit = true;
    },
    loadData(params) {
      if (params == null) params = {};
      params = {
        ...params
      }
      params.condition = this.mooc.formFilter;
      params.condition.infoItem = this.infoItem
      params.condition.infoType = 50;
      return new Promise((resolve, reject) => {
        PracticalController.list(this, params).then(res => {
          resolve({
            dataList: res.data.dataList,
            totalCount: Number(res.data.totalCount)
          });
        }).catch(e => {
          reject(e);
        });
      });
    },
    setPriviewUrl(item) {
      if (item.coverImage && item.coverImage.length > 0) {
        return projectConfig.baseUrl + "admin/upms/file/download?filename=" + item.coverImage[0]
      }
    },
    onAdd() {
      this.$emit("onAdd")
    },
    handleEdit(item) {
      let me = this;
      PracticalController.info(me, qs.stringify({
        id: item.infoId
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
        },
      }).then(res => {
        me.$emit("handleEdit", res.data)
      })
    },
    handleDetail(item) {
      let me = this;
      PracticalController.info(me, qs.stringify({
        id: item.infoId
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
        },
      }).then(res => {
        me.$emit("handleDetail", res.data)
      })
    },
    handleDelete(item) {
      let params = {};
      params.id = item.id;
      this.$confirm('是否删除该数据？').then(res => {
        PracticalController.delete(this, qs.stringify({
          id: item.infoId
        }), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
          }
        }).then(res => {
          this.$message.success('删除成功');
          this.mooc.Mooc.impl.refreshTable();
        }).catch(e => {});
      }).catch(e => {});
    },
    handlePunish(row) {
      let params = {};
      params.infoId = row.infoId;
      params.status = 10;
      this.$confirm('是否确认发布？').then(res => {
        PracticalController.status(this, params).then(res => {
          this.$message.success('发布成功');
          this.mooc.Mooc.impl.refreshTable();
        }).catch(e => {});
      }).catch(e => {});
    },
    handleOffLine(row) {
      let params = {};
      params.infoId = row.infoId;
      params.status = 50;
      this.$confirm('是否确认下线？').then(res => {
        PracticalController.status(this, params).then(res => {
          this.$message.success('下线成功');
          this.mooc.Mooc.impl.refreshTable();
        }).catch(e => {});
      }).catch(e => {});
    },
  },
  mounted() {
    //do something after mounting vue instance
    this.refreshMooc();
  }
}
</script>
<style lang="scss" scoped>
.imgLimit {
    height: 120px;
    // border: 1px solid #ccc;
    width: 98%;
    margin: auto;
    .img {
        display: inline-block;
        width: 100%;
        height: 100%;
    }
}
.first {
    display: flex;
    justify-content: space-between;
    .moocTitle {
        font-size: 16px;
        color: #409EFF;
        &:hover {
            cursor: pointer;
        }
    }
}
.right {
    border-bottom: 1px solid #eaeaea;
}
.remark {
    .font {
        color: #999999;
    }

}
.statusBtn {
    margin-right: 10px;
}
.label {
    color: #808088;
}
.item {
    display: inline-block;
}
.deleteText {
    color: #EF696B;
    &:hover {
        color: #EB4446;
    }
}
</style>
